<template>
    <div class="clue_source_container">
        <el-tabs v-model="activeName">
            <el-tab-pane v-for="item in tabList" :key="item.value" :label="item.label" :name="item.value">
                <clueAttribute v-if="activeName == 1 && item.value == 1" />
                <clueGrade v-if="activeName == 2 && item.value == 2" />
                <clueSource v-if="activeName == 3 && item.value == 3" />
                <abandonReason v-if="activeName == 4 && item.value == 4" />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, computed } from 'vue';
import clueAttribute from './components/clueAttribute/index.vue';
import clueGrade from './components/clueGrade/index.vue';
import clueSource from './components/clueSource/index.vue';
import abandonReason from './components/abandonReason/index.vue';
const activeName = ref('1');
const tabList = ref([
    { label: '线索属性', value: '1' },
    { label: '线索等级', value: '2' },
    { label: '线索来源', value: '3' },
    { label: '放弃原因', value: '4' }
]);
</script>
<style scoped lang="scss">
.clue_source_container {
    padding: 24px;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #fff;
}

:deep(.el-tabs__item) {
    padding: 0 20px 20px;
    height: auto;
    line-height: normal;
}
</style>
